<template>
  <div class="footer-box">
    <div class="common">
        <div class="footer-icon">
            <i class="footer-weixin"></i>
            <i class="footer-weibo"></i>
        </div>
        <div class="footer-info">
            <div class="footer-company">
                <p class="company">快看世界（北京）科技有限公司</p>
                <p>全部信息 快看 版权所有 未经许可 严禁转载</p>
                <p>Copyright © 2015-2022 kuaikanmanhua.com All Rights Reserved</p>
            </div>
            <div class="footer-contact">
                <ul class="conact-fun">
                    <li class="frist">首页</li>
                    <li>站点地图</li>
                    <li>关于快看</li>
                    <li>加入我们</li>
                    <li>我要投稿</li>
                </ul>
                <ul class="conact-help">
                    <li>帮助FAQ</li>
                    <li>漏洞奖励</li>
                    <li>家长监护</li>
                    <li>用户协议</li>
                    <li>联系我们</li>
                </ul>
            </div>
        </div>
        <div class="license">
            <p> <span class="icon-police"></span> 京公网安备 88888888888888|京 ICP 备88888888号-2|
                增值电信业务经营许可证 京ICP证888888号|网络文化经营许可证 京网文〔2022〕8888-888号</p>
            <p>营业执照|出版物经营许可证 新出发京批字第直888888号|
            互联网药品信息服务资格证 (京)-非经营性-8888-8888|
            食品经营许可证 JY88888888888</p>
            <p>纠纷处理|举报邮箱：88888888888888.com|22222全国文化市场举报网站|
            中国互联网不良信息举报中心</p>
            <p>工作时间：工作日 9:30——19:00|前台电话：010-8888881|举报电话：010-8888888</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style scoped lang="less">
.footer-box {
    width: 100%;
    height: 321px;
    background-color: #282828;

    .common {
        padding-top: 27px;
        padding-bottom: 38px;
        .footer-icon {
            height: 24px;
            i {
                display: inline-block;
                width: 24px;
                height: 24px;
                background-repeat: no-repeat;
            }
            .footer-weixin {
                position: relative;
                margin-right: 25px;
                background-image: url('../assets/footer-weixin.png');
                &::before {
                    position: absolute;
                    top: -120px;
                    left: -45px;
                    content: '';
                    display: none;
                    width: 110px;
                    height: 120px;
                    background-image: url('../assets/QRcode.png');
                }
                &:hover::before {
                    display: block;
                }
            }
            .footer-weibo {
                background-image: url('../assets/footer-weibo.png');
            }
        }
        .footer-info {
            margin-top: 20px;
            display: flex;
            font-size: 12px;
            color: #999999;
            .footer-company {
                flex: 1;
                .company {
                    margin-bottom: 5px;
                }
            }
            .footer-contact {
                flex: 1;
                .conact-fun{
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: space-evenly;
                    .frist {
                        margin-right: 23px;
                    }
                }
                .conact-help {
                    display: flex;
                    justify-content: space-evenly;
                }
            }
        }
        .license {
            margin-top: 20px;
            padding-top: 20px;
            font-size: 12px;
            color: #999999;
            border-top: 1px solid #333;
            p {
                text-align: center;
                line-height: 2;
            }
            .icon-police {
                display: inline-block;
                width: 12px;
                height: 12px;
                background-image: url('../assets/icon_police.png');
                background-size: cover;
            }
        }
    }

}
</style>
